<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>leaflet.zoomhome demo</title>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
        <link rel="stylesheet" href="dist/leaflet.zoomhome.css"/>
        <style>
            html, body, #map {
                height: 100%;
                width: 100%;
                padding: 0;
                margin: 0;
            }

            #legend {
                margin: 3em;
                border: 1px solid #555;
                background-color: #fafafa;
                padding: 1em;
                border-radius: 6px;
                -o-border-radius: 6px;
                -moz-border-radius: 6px;
                -webkit-border-radius: 6px;
                color: #555;
                width: 22em;
            }

            #legend p {
                margin: 0;
            }

            #legend h1 {
                margin-top: 0;
                font-size: 120%;
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
        <script src="dist/leaflet.zoomhome.min.js"></script>
    </head>
    <body>
        <div id="map"></div>
        <div id="legend">
            <h1>leaflet.zoomhome demo</h1>
            <p><a href="foo">leaflet.zoomhome</a> is a small <a href="http://www.leafletjs.com">Leaflet</a>-plugin
            for a zoom control that includes a home button to reset the view.</p>
        </div>
        <script>
            var TILES_URL = 'http://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
                INITIAL_LOCATION = [49.0140679, 8.4044366],
                INITIAL_ZOOM = 13,
                ATTRIBUTION = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> ' +
                              'contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">' +
                              'CC-BY-SA</a>. Tiles &copy; <a href="http://cartodb.com/attributions">' +
                              'CartoDB</a>';

            $(document).ready(function() {
                var tiles = L.tileLayer(TILES_URL, {attribution: ATTRIBUTION});
                var map = L.map('map', {zoomControl: false}).addLayer(tiles).setView(INITIAL_LOCATION, INITIAL_ZOOM);
                var legend = L.control({position: 'bottomright'});
                legend.onAdd = function (m) {
                    return L.DomUtil.get('legend');
                };
                legend.addTo(map);

                var zoomHome = L.Control.zoomHome();
                zoomHome.addTo(map);
            });
        </script>
    </body>
</html>
